import { reactive, toRefs } from 'vue';
import { defineStore } from 'pinia';

export const useStoreApp = defineStore('app', () => {
  const state: any = reactive({
    loading: false, // 加载状态
    contentHeight: 0, // 容器高度
    contentSider: 0, // 容器高度
    shrink: true, // 展开状态
    collapsed: false,
    breadcrumbTool: {
      title: '',
      desc: '',
      btns: [],
    }, // 面包屑配置
    appConfig: {
      name: '管理系统', // 名称
      description: '', // 描述
      loginPageBackgroundUrl: '', // 登录背景页
      logoUrl: '', // logo
    },
  });

  // 修改state值
  const changeValue = (type: any, value: any) => {
    state[type] = value;
  };



  const addBreadcrumbTool = (value: any) => {
    state.breadcrumbTool = value;
  };

  const saveShrink = (value: any) => {
    state.shrink = value;
  };

  const saveContentHeight = (value: any) => {
    state.contentHeight = value;
  };

  const getAppConfig = (data) => {
    saveAppConfig(data);
  };

  const saveAppConfig = (value: any = {}) => {
    if (value.name) {
      document.title = value.name;
    }
    if (value.logoUrl) {
      const link: any = window.document.querySelector('link[rel*="icon"]');
      link.href = value.logoUrl;
    }
    Object.assign(state.appConfig, value);
  };

  const switchCollapsed = () => {
    state.collapsed = !state.collapsed;
  };

  return {
    changeValue,
    addBreadcrumbTool,
    saveContentHeight,
    saveShrink,
    saveAppConfig,
    getAppConfig,
    switchCollapsed,
    ...toRefs(state),
  };
});
